<template>
  <div>
    <slot v-if="helpList && helpList.length>0">
      <van-collapse :accordion="true" v-model="activeNames">
        <van-collapse-item :title="item.title2" :name="index" v-for="(item, index) in helpList" :key="index">
          <span v-html="item.content"></span>
        </van-collapse-item>
      </van-collapse>
    </slot>
    <slot v-else>
      <van-collapse :accordion="true" v-model="activeNames">
        <van-collapse-item :title="issue.question" :name="index" v-for="(issue, index) in issueList" :key="index">
          {{issue.answer}}
        </van-collapse-item>
      </van-collapse>
    </slot>
  </div>
</template>

<script>
  import {
    Collapse,
    CollapseItem
  } from 'vant';
  import {
    issueList,
    getArticleHtmlList
  } from '@/api/api';

  export default {
    data() {
      return {
        activeNames: [-1],
        issueList: [],
        helpList: [],
      };
    },
    created() {
      this.getIssueList();
      this.init()
    },
    methods: {
      init() {
        //获取 帮助中心 v_html渲染数据
        getArticleHtmlList({
          'keywords': '帮助中心'
        }).then(res => {
          this.helpList = res.data.data.list ? res.data.data.list : []
        })
      },
      getIssueList() {
        issueList().then(res => {
          this.issueList = res.data.data.list
        })
      }
    },

    components: {
      [Collapse.name]: Collapse,
      [CollapseItem.name]: CollapseItem
    }
  };

</script>
<style lang="scss" scoped>
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
  }

</style>
